<template>
    <div class="topBack" :style="'background-image: linear-gradient(to bottom,'+bgc+',white)'">
      <div class="homeBanner">
        <swiper style="max-height:21rem" :aspect-ratio="aspect" :auto="true" dots-position="center">
          <swiper-item class="swiper-demo-img" v-for="(item, index) in bannerImg" :key="index">
            <img :src="item.img+ossSrc" @click="bannerFn(item)" />
          </swiper-item>
        </swiper>
      </div>
      
    </div>
  </template>
  
  <script>
  import { Swiper,SwiperItem } from 'vux'
  import bus from '@/assets/evnetBus.js'

    export default {
      components: {Swiper,SwiperItem },
      data() {
        return {
        }
      },
      props: {
        bannerImg:{},
        bgc:{},
        color:{},
        showAddress:{},
        placher:String,
        showBanner:Boolean,
        aspect:{}
      },
      methods:{
        keyDownFn(e){
          if(e.keyCode==13){
            document.activeElement.blur()
            this.serchFn()
          }
        },
        // focusFn(){
        //   this.$emit('focus')
        // },
        serchFn(){
          this.$emit('serchClick',this.serchKey)
        },
        initMap(){
            let geolocation = new BMap.Geolocation();//返回用户当前的位置
            geolocation.getCurrentPosition(function (r) {
              if (this.getStatus() == BMAP_STATUS_SUCCESS) {
                localStorage.setItem('longitude',r.longitude)
                localStorage.setItem('latitude',r.latitude)
              }
            }); 
        },
        checkCityFn(){
          this.$router.push({path:'/checkCity'})
        },
        bannerFn(item){
          if(item.url){
            window.location.href = item.url
          }
        },
      },
      mounted(){
        if(this.$route.path=='/active'){
          this.initMap()
        }
        bus.$on('getSerchVal',(data)=>{
          this.serchKey = data
        })
      },
      created() {
      },
    }
  </script>
  
  <style scoped lang="less">
  
  .topBack{
      width: 100%;
      .homeHeader{
        width: 92%;
        box-sizing: border-box;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.75rem 0;
        .address{
          font-size: 0.65rem;
          display: flex;
          margin-right: 0.6rem;
          align-items: center;
          .iconfont{
            font-size: 0.8rem;
            margin-right: 0.25rem;
          }
        }
        .serchInput{
          flex: 1;
          width: 0.5rem;
          background-color: #fff;
          // margin-right: 0.6rem;
          padding: 0 0.25rem 0 0.75rem;
          color: #777;
          border-radius: 1rem;
          box-sizing: border-box;
          height: 1.8rem;
          line-height: 1.8rem;
          // white-space: nowrap;
          // overflow: hidden;
          font-size: 0.65rem;
          // text-overflow: ellipsis;
          display: flex;
          align-items: center;
          border: 1px solid black;
          input{
            border: none;
            outline: none;
            padding:0;
            width: 100%;
            height: 1.8rem;
            line-height: 1.8rem;
            background: none;
            font-size: 0.6rem;
          }
          .serchBtn{
            width: 1.8rem;
            height: 1.8rem;
            font-size: 1.2rem;
            text-align: center;
            line-height: 1.8rem;
            border-radius: 50%;
            // color: white;
          }
        }
      }
      .homeBanner{
        width: 92%;
        font-size: 0;
        margin: 0 auto;
        img{
          width: 100%;
          border-radius: 0.5rem;
        }
      }
    }
  </style>
  